<template>
	<view class="promotion-create-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-title">{{$t('promotionCreate.createPromotion')}}</view>
			<view class="header-right"></view>
		</view>

		<!-- 代理信息预览 -->
		<view class="agent-preview">
			<image class="agent-cover" :src="agentInfo.cover" mode="aspectFill"></image>
			<view class="agent-info">
				<view class="agent-title">{{agentInfo.title}}</view>
				<view class="agent-commission">{{$t('promotionCreate.commissionRatio')}}: <text class="highlight">{{agentInfo.commissionRatio}}%</text></view>
			</view>
		</view>

		<!-- 推广表单 -->
		<view class="promotion-form">
			<view class="form-section">
				<view class="section-title">{{$t('promotionCreate.promotionSettings')}}</view>
				
				<view class="form-item">
					<view class="form-label">{{$t('promotionCreate.promotionTitle')}}</view>
					<input 
						class="form-input" 
						v-model="promotionForm.title" 
						:placeholder="$t('promotionCreate.enterPromotionTitle')"
						placeholder-style="color: #666;"
					/>
				</view>

				<view class="form-item">
					<view class="form-label">{{$t('promotionCreate.promotionDescription')}}</view>
					<textarea 
						class="form-textarea" 
						v-model="promotionForm.description" 
						:placeholder="$t('promotionCreate.enterPromotionDescription')"
						placeholder-style="color: #666;"
						maxlength="200"
					></textarea>
					<view class="char-count">{{promotionForm.description.length}}/200</view>
				</view>

				<view class="form-item">
					<view class="form-label">{{$t('promotionCreate.promotionLink')}}</view>
					<input 
						class="form-input" 
						v-model="promotionForm.link" 
						:placeholder="$t('promotionCreate.enterPromotionLink')"
						placeholder-style="color: #666;"
					/>
				</view>

				<view class="form-item">
					<view class="form-label">{{$t('promotionCreate.promotionPlatform')}}</view>
					<view class="platform-options">
						<view 
							class="platform-option" 
							:class="{ active: promotionForm.platform === 'wechat' }"
							@click="selectPlatform('wechat')"
						>
							<text class="platform-icon">💬</text>
							<text class="platform-name">{{$t('promotionCreate.wechat')}}</text>
						</view>
						<view 
							class="platform-option" 
							:class="{ active: promotionForm.platform === 'qq' }"
							@click="selectPlatform('qq')"
						>
							<text class="platform-icon">🐧</text>
							<text class="platform-name">{{$t('promotionCreate.qq')}}</text>
						</view>
						<view 
							class="platform-option" 
							:class="{ active: promotionForm.platform === 'weibo' }"
							@click="selectPlatform('weibo')"
						>
							<text class="platform-icon">📱</text>
							<text class="platform-name">{{$t('promotionCreate.weibo')}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="form-section">
				<view class="section-title">{{$t('promotionCreate.promotionStrategy')}}</view>
				
				<view class="strategy-item">
					<view class="strategy-title">{{$t('promotionCreate.targetAudience')}}</view>
					<view class="strategy-options">
						<view 
							class="strategy-option" 
							:class="{ active: promotionForm.targetAudience === 'all' }"
							@click="selectTargetAudience('all')"
						>
							{{$t('promotionCreate.allAges')}}
						</view>
						<view 
							class="strategy-option" 
							:class="{ active: promotionForm.targetAudience === 'young' }"
							@click="selectTargetAudience('young')"
						>
							{{$t('promotionCreate.youngGroup')}}
						</view>
						<view 
							class="strategy-option" 
							:class="{ active: promotionForm.targetAudience === 'adult' }"
							@click="selectTargetAudience('adult')"
						>
							{{$t('promotionCreate.adultGroup')}}
						</view>
					</view>
				</view>

				<view class="strategy-item">
					<view class="strategy-title">{{$t('promotionCreate.promotionTime')}}</view>
					<view class="time-options">
						<view 
							class="time-option" 
							:class="{ active: promotionForm.duration === '7' }"
							@click="selectDuration('7')"
						>
							{{$t('promotionCreate.days7')}}
						</view>
						<view 
							class="time-option" 
							:class="{ active: promotionForm.duration === '15' }"
							@click="selectDuration('15')"
						>
							{{$t('promotionCreate.days15')}}
						</view>
						<view 
							class="time-option" 
							:class="{ active: promotionForm.duration === '30' }"
							@click="selectDuration('30')"
						>
							{{$t('promotionCreate.days30')}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action-btn preview-btn" @click="previewPromotion">{{$t('promotionCreate.preview')}}</view>
			<view class="action-btn create-btn" @click="createPromotion">{{$t('promotionCreate.createPromotion')}}</view>
		</view>
	</view>
</template>

<script>
	import { languageMixin, pageTitleMixin } from '@/common/mixins.js';
	
	export default {
		mixins: [languageMixin, pageTitleMixin],
		data() {
			return {
				agentId: '',
				agentInfo: {
					id: '',
					title: 'เทพบุตรบัญชีแค้น',
					cover: '/static/logo.png',
					commissionRatio: 30
				},
				userInfo: {}, // 用户信息
				promotionForm: {
					title: '',
					description: '',
					link: '',
					platform: 'wechat',
					targetAudience: 'general',
					duration: '7'
				},
				platformOptions: [
					{ value: 'wechat', label: '微信' },
					{ value: 'qq', label: 'QQ' },
					{ value: 'weibo', label: '微博' },
					{ value: 'douyin', label: '抖音' }
				],
				targetOptions: [
					{ value: 'general', label: '通用' },
					{ value: 'young', label: '年轻用户' },
					{ value: 'female', label: '女性用户' },
					{ value: 'male', label: '男性用户' }
				],
				durationOptions: [
					{ value: '1', label: '1天' },
					{ value: '3', label: '3天' },
					{ value: '7', label: '7天' },
					{ value: '30', label: '30天' }
				]
			}
		},
		onLoad(options) {
			console.log('Promotion create page loaded with options:', options);
			if (options.id) {
				this.agentId = options.id;
				this.loadUserInfo(options.id);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			loadUserInfo(agentId) {
				const token = uni.getStorageSync("userinfo") ? uni.getStorageSync("userinfo").token : '';
				if (!token) {
					console.log('No token found, skipping user info load');
					this.loadAgentInfo(agentId);
					return;
				}
				
				uni.request({
					url: this.configs.webUrl + '/api/user/index',
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + token
					},
					success: (res) => {
						console.log('User info response:', res.data);
						
						if (res.data && res.data.code === 1) {
							this.userInfo = res.data.data;
							console.log('User info loaded:', this.userInfo);
						} else {
							console.log('Failed to load user info:', res.data);
						}
						
						// 无论成功失败都继续加载代理信息
						this.loadAgentInfo(agentId);
					},
					fail: (err) => {
						console.error('获取用户信息失败:', err);
						// 即使获取用户信息失败，也继续加载代理信息
						this.loadAgentInfo(agentId);
					}
				});
			},
			loadAgentInfo(agentId) {
				// 获取用户信息
				let uid = 0;
				if(this.userInfo && this.userInfo.id) {
					uid = this.userInfo.id;
				} else if(uni.getStorageSync("userinfo")){
					uid = uni.getStorageSync("userinfo").id;
				}
				
				// 调用API获取视频详情
				uni.request({
					url: this.configs.webUrl + '/api/video/videoinfo',
					data: {
						page: 1,
						uid: uid,
						vid: agentId,
						mid: 0,
						token: uni.getStorageSync("userinfo") ? uni.getStorageSync("userinfo").token : ''
					},
					success: (res) => {
						console.log('Agent info response:', res.data);
						
						if(res.data.isempty == 1 && res.data.data && res.data.data.length > 0) {
							// 获取第一个视频的详情
							const videoData = res.data.data[0];
							
							// 更新代理信息
							this.agentInfo = {
								id: agentId,
								title: videoData.name || 'เทพบุตรบัญชีแค้น',
								cover: videoData.img || '/static/logo.png',
								commissionRatio: 30
							};
							
							// 自动填充推广标题
							this.promotionForm.title = `推荐：${this.agentInfo.title}`;
							this.promotionForm.link = `https://example.com/agent/${agentId}`;
						}
					},
					fail: (err) => {
						console.error('获取代理信息失败:', err);
						uni.showToast({
							title: '获取视频信息失败',
							icon: 'none'
						});
					}
				});
			},
			selectPlatform(platform) {
				this.promotionForm.platform = platform;
			},
			selectTargetAudience(audience) {
				this.promotionForm.targetAudience = audience;
			},
			selectDuration(duration) {
				this.promotionForm.duration = duration;
			},
			previewPromotion() {
				if (!this.validateForm()) {
					return;
				}
				
				uni.showModal({
					title: '推广预览',
					content: `标题：${this.promotionForm.title}\n描述：${this.promotionForm.description}\n平台：${this.getPlatformName(this.promotionForm.platform)}`,
					showCancel: false,
					confirmText: '确定'
				});
			},
			createPromotion() {
				if (!this.validateForm()) {
					return;
				}
				
				uni.showLoading({
					title: '创建中...'
				});
				
				// 模拟创建推广
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '推广创建成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 2000);
			},
			validateForm() {
				if (!this.promotionForm.title.trim()) {
					uni.showToast({
						title: '请输入推广标题',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.promotionForm.description.trim()) {
					uni.showToast({
						title: '请输入推广描述',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.promotionForm.link.trim()) {
					uni.showToast({
						title: '请输入推广链接',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			getPlatformName(platform) {
				const platformNames = {
					wechat: '微信',
					qq: 'QQ',
					weibo: '微博'
				};
				return platformNames[platform] || '未知';
			}
		}
	}
</script>

<style>
	.promotion-create-container {
		background: #000;
		min-height: 100vh;
		color: #fff;
		padding-bottom: 120upx;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx;
		padding-top: 60upx;
		background: #111;
		border-bottom: 1px solid #333;
	}

	.header-left {
		width: 60upx;
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 48upx;
		color: #fff;
		font-weight: bold;
	}

	.header-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		width: 60upx;
	}

	/* 代理信息预览 */
	.agent-preview {
		background: #111;
		margin: 20upx;
		border-radius: 16upx;
		border: 1px solid #333;
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.agent-cover {
		width: 120upx;
		height: 120upx;
		border-radius: 12upx;
		background: #222;
		margin-right: 20upx;
	}

	.agent-info {
		flex: 1;
	}

	.agent-title {
		font-size: 28upx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 8upx;
	}

	.agent-commission {
		font-size: 24upx;
		color: #999;
	}

	.highlight {
		color: #FF4444;
		font-weight: 600;
	}

	/* 推广表单 */
	.promotion-form {
		margin: 20upx;
	}

	.form-section {
		background: #111;
		border-radius: 16upx;
		border: 1px solid #333;
		padding: 30upx;
		margin-bottom: 20upx;
	}

	.section-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 24upx;
	}

	.form-item {
		margin-bottom: 24upx;
	}

	.form-label {
		font-size: 28upx;
		color: #fff;
		margin-bottom: 12upx;
		font-weight: 500;
	}

	.form-input {
		width: 100%;
		height: 80upx;
		background: #222;
		border: 1px solid #333;
		border-radius: 8upx;
		padding: 0 20upx;
		font-size: 28upx;
		color: #fff;
		box-sizing: border-box;
	}

	.form-textarea {
		width: 100%;
		height: 160upx;
		background: #222;
		border: 1px solid #333;
		border-radius: 8upx;
		padding: 20upx;
		font-size: 28upx;
		color: #fff;
		box-sizing: border-box;
		resize: none;
	}

	.char-count {
		text-align: right;
		font-size: 24upx;
		color: #666;
		margin-top: 8upx;
	}

	/* 平台选择 */
	.platform-options {
		display: flex;
		gap: 20upx;
	}

	.platform-option {
		flex: 1;
		height: 80upx;
		background: #222;
		border: 1px solid #333;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		transition: all 0.3s;
	}

	.platform-option.active {
		background: #FF4444;
		border-color: #FF4444;
	}

	.platform-icon {
		font-size: 32upx;
		margin-bottom: 4upx;
	}

	.platform-name {
		font-size: 24upx;
		color: #fff;
	}

	/* 策略选择 */
	.strategy-item {
		margin-bottom: 24upx;
	}

	.strategy-title {
		font-size: 28upx;
		color: #fff;
		margin-bottom: 16upx;
		font-weight: 500;
	}

	.strategy-options, .time-options {
		display: flex;
		gap: 16upx;
	}

	.strategy-option, .time-option {
		flex: 1;
		height: 60upx;
		background: #222;
		border: 1px solid #333;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #fff;
		transition: all 0.3s;
	}

	.strategy-option.active, .time-option.active {
		background: #FF4444;
		border-color: #FF4444;
	}

	/* 底部操作按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		gap: 20upx;
		padding: 20upx;
		background: #000;
		border-top: 1px solid #333;
	}

	.action-btn {
		flex: 1;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40upx;
		font-size: 28upx;
		font-weight: 600;
		color: #fff;
	}

	.preview-btn {
		background: #333;
		border: 1px solid #555;
	}

	.create-btn {
		background: #FF4444;
	}
</style> 